<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="http://hongweizhiyuan.oss-cn-hangzhou.aliyuncs.com/layui/css/layui.css"/>
</head>
<body>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>DEMO1:layui直接复制过来的复选框</legend>
</fieldset>
<div class="layui-form-item" pane="">
    <label class="layui-form-label">原始复选框</label>
    <div class="layui-input-block">
        <input type="checkbox" name="like1[write]" lay-skin="primary" title="写作" checked="">
        <input type="checkbox" name="like1[read]" lay-skin="primary" title="阅读">
        <input type="checkbox" name="like1[game]" lay-skin="primary" title="游戏" disabled="">
    </div>
</div>

<hr/>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>DEMO2：加 layui-form 显示后的复选框</legend>
</fieldset>
<div class="layui-form">
    <div class="layui-form-item" pane="">
        <label class="layui-form-label">原始复选框</label>
        <div class="layui-input-block">
            <input type="checkbox" name="like1[write]" lay-skin="primary" title="写作" checked="">
            <input type="checkbox" name="like1[read]" lay-skin="primary" title="阅读">
            <input type="checkbox" name="like1[game]" lay-skin="primary" title="游戏" disabled="">
        </div>
    </div>
</div>
<hr/>


<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>DEMO3：laytpl 模板里不显示checbox</legend>
</fieldset>
<div id="view"></div>

<script id="demo2" type="text/html">
    <h3>{{ d.title }}</h3>
    <div class="layui-form">
        <div class="layui-form-item" pane="">
            <label class="layui-form-label">原始复选框</label>
            <div class="layui-input-block">
                <input type="checkbox" name="like1[write]" lay-skin="primary" title="写作" checked="">
                <input type="checkbox" name="like1[read]" lay-skin="primary" title="阅读">
                <input type="checkbox" name="like1[game]" lay-skin="primary" title="游戏" disabled="">
            </div>
        </div>
    </div>
</script>


<script src="http://hongweizhiyuan.oss-cn-hangzhou.aliyuncs.com/layui/layui.js"></script>
<script>
    //一般直接写在一个js文件中
    layui.use(['layer', 'form','jquery','laytpl'], function(){
        var layer = layui.layer
            ,form = layui.form
            , $ = layui.jquery
            , laytpl = layui.laytpl;;
        var data = { //数据
            "title": "Layui常用模块"
            , "list": [
                {"modname": "弹层", "alias": "layer", "site": "layer.layui.com"},
                {"modname": "表单", "alias": "form"}
            ]
        }
        var getTpl = demo2.innerHTML;
        var view = document.getElementById('view');
        laytpl(getTpl).render(data, function (html) {
            view.innerHTML = html;
            form.render();  //关键语句
        });

    });
</script>
</body>
</html>